<template>
  <view class="shopCard" @click="goodsClick(item)">
    <image
      class="card_img"
      :src="item.thumb"
      mode="widthFix"
      style="width: 224rpx; height: 224rpx; flex-shrink: 0"
    ></image>
    <view class="card—right">
      <view class="name">{{ item.name }}</view>
      <view class="price">
        <text class="price_n">￥{{ item.price }}</text
        ><text class="price_o">￥{{ item.original_price }}</text>
      </view>
      <text class="t-wall" v-if="item?.sale_count"
        >{{ item?.sale_count }}人已购买</text
      >
    </view>
  </view>
</template>

<script>
export default {
  name: "ShopCard",
  props: ["item", "height"],
  data() {
    return {
      image_height: 0
    };
  },
  methods: {
    _onClick() {
      this.$emit("click");
    },
    goodsClick(item) {
      uni.navigateTo({
        url: "/pages/shop/index/goods_info?id=" + item.uuid
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.shopCard {
  padding-bottom: 40rpx;
  display: flex;
  .card_img {
    border-radius: 10px;
    background: #fff;
  }
  .card-right {
    flex: 2;
  }
  .name {
    width: 92%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 设置最大显示行数 */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    font-size: 28rx;
    color: #333;
    margin: 0 auto;
  }
  .t-wall {
    border-radius: 5px;
    background: #fdefec;
    color: #ff7c7c;
    text-align: center;
    margin: 0 10px;
    font-size: 24rpx;
    padding: 4px 6px;
  }
  .price {
    margin: 20rpx auto;
    width: 92%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    // height: 50rpx;
    align-items: center;
  }

  .price_n {
    font-size: 36rpx;
    font-weight: 400;
    color: #ff4949;
  }

  .price_o {
    font-size: 24rpx;
    color: #999;
    text-decoration: line-through;
    margin-left: 20rpx;
  }

  .yishou {
    margin: 0 auto;
    width: 92%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 50rpx;
  }

  .yishou_s {
    color: #f60;
  }

  .yishou_y {
    color: #999;
  }
}
</style>
